<template>
    <div class="sy3">
          <div class="firstsy3">
                <div class="sy3title">
                    <p > 研发产品</p>
                    <p class="animate__animated animate__slow" :class="{animate__zoomInDown:2==$store.state.index}">Develop Product</p>
                </div>
                <div class="imgshowlist">
                    <div>
                        <img src="../../assets/img/jianbianbj2.png"   class="animate__animated delay1" :class="[{animate__fadeInLeftBig:2==$store.state.index},{tobig:1==bigindex}]" @mouseover="ifbig(1)"  @mouseleave="ifbig(0)">
                    </div>
                    <div>
                        <img src="../../assets/img/sfq2.jpg"  class="animate__animated delay2" :class="[{animate__fadeInLeftBig:2==$store.state.index},{tobig:2==bigindex}]" @mouseover="ifbig(2)"  @mouseleave="ifbig(0)"  >
                    </div>
                    <div>
                        <img src="../../assets/img/nav.jpg"  class="animate__animated delay3" :class="[{animate__fadeInLeftBig:2==$store.state.index},{tobig:3==bigindex}]" @mouseover="ifbig(3)"  @mouseleave="ifbig(0)">
                    </div>
                    <div>
                        <img id="img" src="../../assets/img/picone.jpg"  class="animate__animated delay4" :class="[{animate__fadeInLeftBig:2==$store.state.index},{tobig:4==bigindex}]" @mouseover="ifbig(4)"  @mouseleave="ifbig(0)" >
                    </div>

                </div>
                <div class="block  animate__animated delay2" :class="{animate__fadeInUp:2==$store.state.index}" id="timeline">
                    <el-timeline  >
                        <el-timeline-item
                                v-for="(activity, index) in activities"
                                :key="index"
                                :icon="activity.icon"
                                :type="activity.type"
                                :color="activity.color"
                                :size="activity.size"
                                :timestamp="activity.timestamp">
                            <div >{{activity.content}}</div>
                        </el-timeline-item>
                    </el-timeline>
                </div>
         
            </div>
             <div class="secendsy3">
                <div class="sy3title ">
                    <p > 自己产品</p>
                    <p class="animate__animated animate__slow" :class="{animate__zoomInDown:2==$store.state.index}">Develop Product</p>
                </div>
                <div class="imgshowlist">
                    <div>
                        <img src="../../assets/img/jianbianbj2.png"   class="animate__animated delay1" :class="[{animate__fadeInLeftBig:2==$store.state.index},{tobig:1==bigindex}]" @mouseover="ifbig(1)"  @mouseleave="ifbig(0)">
                    </div>
                    <div>
                        <img src="../../assets/img/sfq2.jpg"  class="animate__animated delay2" :class="[{animate__fadeInLeftBig:2==$store.state.index},{tobig:2==bigindex}]" @mouseover="ifbig(2)"  @mouseleave="ifbig(0)"  >
                    </div>
                    <div>
                        <img src="../../assets/img/nav.jpg"  class="animate__animated delay3" :class="[{animate__fadeInLeftBig:2==$store.state.index},{tobig:3==bigindex}]" @mouseover="ifbig(3)"  @mouseleave="ifbig(0)">
                    </div>
                    <div>
                        <img id="img" src="../../assets/img/picone.jpg"  class="animate__animated delay4" :class="[{animate__fadeInLeftBig:2==$store.state.index},{tobig:4==bigindex}]" @mouseover="ifbig(4)"  @mouseleave="ifbig(0)" >
                    </div>

                </div>
                <div class="block  animate__animated delay2" :class="{animate__fadeInUp:2==$store.state.index}" id="timeline">
                    <el-timeline  >
                        <el-timeline-item
                                v-for="(activity, index) in activities"
                                :key="index"
                                :icon="activity.icon"
                                :type="activity.type"
                                :color="activity.color"
                                :size="activity.size"
                                :timestamp="activity.timestamp">
                            <div >{{activity.content}}</div>
                        </el-timeline-item>
                    </el-timeline>
                </div>
         
            </div>
             
               <div @click="torightpage()" v-show="0!=iffinal"><i class="iconfont icon-you  topageright" /></div>
                
                 <div @click="toleftpage()" v-show="0!=iffirst"><i class="iconfont icon-you topageleft" /></div>
                  
               
              

      
    </div>

</template>


  <!-- swiper3组件只是home页面下swiper的第三个界面抽出来的组件 -->
<script>
export default {
    name:"swiper3",
       mounted () {
         //监听id为timeline的元素上的动画是否结束如果结束则将控制当前模块的index设置为0,以停止当前模块的动画
        document.querySelector('#img').addEventListener('animationend', () => {
           this.$store.commit('updateIndex',{index:0})
        });
    },
    props:{
        index:{
            type:Number,
            default:1
        }
    },
    data(){
        return{
             bigindex: 0,
            iffirst:0,//控制第三个轮播图模块下面的左侧按钮是否显示
            iffinal:1,//控制第三个轮播图模块下面的右侧按钮是否显示
            sy3firstmarginLeft:0,//控制第三个轮播图模块第一个研发界面距离左侧的距离，控制这个可以改变现实的界面
            // 第三个轮播图右侧时间线
            activities: [{
                content: 'PPM生产管理系统',
                timestamp: '2018-04-12 20:46',
                size: 'large',
                type: 'primary',
                icon: 'el-icon-more'
            }, {
                content: 'JCX进销存管理',
                timestamp: '2018-04-03 20:46',
                color: '#0bbd87'
            }, {
                content: 'CRM客户管理系统',
                timestamp: '2018-04-03 20:46',
                size: 'large'
            }, {
                content: 'POS收银系统',
                timestamp: '2018-04-03 20:46'
            }],
         
        }
    },
    methods: {
        ifbig(index) {
            this.bigindex = index
        },
        torightpage(){
            this.iffirst+=1;
            this.iffinal-=1;
            this.sy3firstmarginLeft-=100;
            this.$store.commit('updateIndex',{index:2})
            console.log(this.index)
            document.querySelector(".firstsy3").style.marginLeft=`${this.sy3firstmarginLeft}vw`
        },
        toleftpage(){
            this.iffirst-=1;
            this.iffinal+=1;
            this.sy3firstmarginLeft+=100;
            this.$store.commit('updateIndex',{index:2})
            document.querySelector(".firstsy3").style.marginLeft=`${this.sy3firstmarginLeft}vw`
        }
    }
}
</script>

<style lang='less' scoped>

.firstsy3{
     margin-left: 0vw;
}
.sy3 .firstsy3,.secendsy3{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-shrink:0;
  transition: all 0.3s ease-in-out;
}
.sy3{
 
     position: relative;
     display: flex;
    overflow: hidden;
    
    .topageleft{
    position: absolute;
    bottom: 8vh;
     left: 8vw;
    width: 0.9rem;
    height:0.35rem;
    line-height: 0.35rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    font-size: 30px;
    transform: rotateZ(-180deg);
  }
  .topageright{
    position:absolute;
    line-height: 0.35rem;
    bottom: 8vh;
    right: 8vw;
    width: 0.9rem;
    height: 0.35rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    font-size: 0.3rem;
  }
  .topageright:hover{
    border: 1px solid rgb(87, 144, 218);      
  }
  .topageleft:hover{
    border: 1px solid rgb(87, 144, 218);      
  }
  
  .sy3title{
    p:nth-child(1){
      font-size: 24px;
    }
    p:nth-child(2){
      font-size: 40px;
      text-indent: 30px;
    }
  }
  .imgshowlist{
    width: 500px;
    height: 504px;
    //border: 1px solid red;
   div{
     width: 100%;
     height: 24%;
     margin-top: 10px;
     overflow: hidden;
     img{
       width: 100%;
       height: 100%;
       transition: all 0.5s ease-in-out;
     }
    .tobig{
       transform: scale(1.5);
       cursor: pointer;
     }
   }
  }
  .el-timeline-item{
    height: 1rem;
  }
  /deep/ .el-timeline-item__content{
    font-size: 24px ;
  }
}
/*动画延迟效果*/
.delay1{
  animation-delay: 0.2s;
}
.delay2{
  animation-delay: 0.4s;
}
.delay3{
  animation-delay: 0.6s;
}
.delay4{
  animation-delay: 0.8s;
}

</style>